<template>
  <el-container class="header-backgroud">
    <el-col :span="1">
    </el-col>
      <el-col :span="4" style="margin-top: -30px" >
        <el-link type="primary" @click="refreshPage">
          <i class="iconfont icon-QQyouxiang"></i>
        </el-link>
      </el-col>
      <el-col :span="8">
        <h1>我的邮箱地址: {{ this.user.userMail }}</h1>
      </el-col>
    <el-col :span="2">

      <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        设置<i class="el-icon-arrow-down el-icon-s-tools"></i>
      </span>

        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item ><el-button style="color: #2c3e50" type="text" @click="change">修改密码</el-button></el-dropdown-item>
          <el-dropdown-item><el-button style="color: #2c3e50" type="text" @click="logout">登出账号</el-button></el-dropdown-item>
          <el-dropdown-item><el-button style="color: #2c3e50" type="text" @click="deleteUser">注销账号</el-button></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
      <el-col :span="6">
        <el-input v-model="searchInput" placeholder="请输入搜索内容"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-col>
  </el-container>

</template>
<script>
import {mapMutations, mapState} from "vuex";
import axios from "axios";

export default {
  name: 'MailboxHeader',
  data() {
    return {
      searchInput: '',
    }
  },
  computed:{
    ...mapState(['folderTo','selectInputTo','user'])

  },
  watch:{
    selectInput(newVal, oldVal) {
      console.log("watch selectInput: " + newVal);
      // 注意：通常不需要重新赋值，因为 newVal 已经是新的值
      // this.folderTo = newVal; // 这一行通常是不需要的
      this.getEmailList();
      this.reload();
    },
  },
  methods: {
    ...mapMutations(['setSearchInput','updateFolderId']),
    refreshPage() {
      this.$router.push({ path: '/home' }).then(() => {
        window.location.reload()
        // 可以在这里执行状态重置或数据刷新逻辑
        this.searchInput = '';
      });

    },
    handleSearch() {
      this.$emit('search');
      this.$store.commit('setSearchInput', this.searchInput);
      this.$store.commit('updateFolderId',7);
      console.log(this.folderTo)
      console.log(this.selectInputTo);
      if (this.$route.name !== 'MailboxList' || this.$route.params.folderId !== this.folderTo) {
        console.log("调用mailboxlist7");
        const componentName = 'MailboxList';
        this.replaceComponent(componentName);
        this.$router.push({name: 'MailboxList', params: {folderId: this.folderTo}});
      }

    },
    change(){
      console.log("changePassword1")
      this.$emit('open-dialog');
    },
    logout(){
      this.$confirm('此操作将退出账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.commit('logout');
        this.$router.push({ path: '/' });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
   },

    deleteUser(){
      this.$confirm('此操作将注销账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("deleteUser");
        console.log(this.user);
        axios.post('http://localhost:8989/user/deleteUser',
            {
                 userId: this.user.userId,
                 userName: this.user.userName,
                 userPass: this.user.userPass,
              })
            .then(res => {
            this.$message({
              type: 'success',
              message: '注销成功!'
            });
              this.$router.push({ path: '/' });
            }).catch(res=> {
            this.$message({
              type: 'error',
              message: '注销失败!'
            });
          });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },


  },

}
</script>
<style>
.header-backgroud{
  background-color: #f5f7fa;
  width: 100%;
  height: 100%;
  //background: linear-gradient(to right, #5a88ea, #7793cc);
}
.icon-QQyouxiang{
  font-size: 120px;
  color: #006fff;

}
.el-dropdown-link{
  font-size: 20px;
  color: #2e2f31;
  justify-content: center;
}
</style>